<template>
  <!-- <div :class="{'has-logo':showLogo}"> -->
  <div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import {getSysmenu} from '../../../api/api'
import {getMenu} from '../../../api/user'
import variables from '@/styles/variables.scss'

export default {
  components: { SidebarItem, Logo },
  data() {
    return {
      permission_routes:[]
    }
  },
  methods:{
      getMenuData() {

          // 调用主菜单接口
          getMenu().then(res=>{
              if(res.code==1){
                  this.permission_routes=res.data;
                  console.log(res.data);
                  console.log(this.permission_routes);
                  // 先保存到本地存储中
                  // sessionStorage.setItem('menu',JSON.stringify(res.data));
                  // var menu=sessionStorage.getItem('menu');
                  // menu=JSON.parse(menu);
                  
                  // 将主菜单列表保存到vuex中
                  // this.$store.dispatch('dailog/showDailog')
                  this.$store.commit('dailog/editmenuList',menu);

                  // 从vuex中获取类表
                  // var menuList=this.$store.modules.menuList
                  // console.log(menuList)
              }else{
                  this.$message.error(res.message)
              }
   
          })


      // let menuData = [];   
      // getSysmenu().then(
      //   function(data) {
      //     let data1 = data.data.menuArr;
      //     data1.forEach((val,index) => {
      //       let i=8;
      //       if(val.menuname==menuName){
      //         let systemItem = {};
      //         systemItem.icon = "el-icon-setting";
      //         systemItem.idex=i;
      //         systemItem.title=val.menuname;
      //         systemItem.subs=[];
      //         data1.forEach(value => {
      //           if(value.parentid==val.id){
      //             let systemSubs = {};
      //             let menuurl = value.menuurl.split('/')[2];
      //             systemSubs.index = menuurl;
      //             systemSubs.title = value.menuname;
      //             systemItem.subs.push(systemSubs);
      //           }
      //         });
      //         this.permission_routes.push(systemItem);
      //       }
      //       i++;
      //     });
      //   }.bind(this)
      // );
        
    }
    
    },
    created() {
    // // this.items=[];
    // // this.items=constantRoutes;
    // // console.log(constantRoutes);
    // // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    // bus.$on("collapse", msg => {
    //   this.collapse = msg;
    // });
    this.getMenuData();
    console.log(6666);
    console.log(this.$route);
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'sidebar'
    ]),
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    variables() {
      return variables
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  }
}
</script>
